<template>
    <div>
      <div class="lianjie">
            <ul>
                <li>登录</li>
                <li>注册</li>
                <li>客户服务</li>
                <li>返回顶部</li>
            </ul>
        </div>
        <div class="kehuduan">
            <img src="//m.360buyimg.com/mobilecms/jfs/t16423/186/2517573622/5186/75a541f7/5ab1c0deN947bdcba.png" alt="">
            <img src="//m.360buyimg.com/mobilecms/jfs/t18550/294/898388074/6574/3a8c5413/5ab0b8e9Ne9c48331.png" alt="">
            <img src="//m.360buyimg.com/mobilecms/jfs/t14581/218/2689195961/4696/203b872a/5ab1c0f2N51c3f1bb.png" alt="">
        </div>
        <div class="banquan">
            Copyright © 2004-2020 京东JD.com 版权所有
        </div>
            <a class="bottom-top" href="#" @click="funs" v-show="show">
    </a>
    </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                flag:false,
                show:false
            }
        },
        methods:{
                handleScroll() {
                  
      // 页面滚动距顶部距离
      var scrollTop =window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > 700) {
          document.body.scrollTop = 0
          console.log(scrollTop)
          this.show = true
          console.log(this.show)
      }else{
        this.show = false
      }

    },
    funs(){
      document.body.scrollTop = 0
    }
        },
        mounted(){
          window.addEventListener("scroll", this.handleScroll, true);   
        }
    }
    </script>
    
    <style scoped>
    .lianjie {
      box-sizing: border-box;
      border-bottom: 1px solid #e5e5e5;
      border-top: 1px solid #e5e5e5;
      padding: 4.26666667vw 5.33333333vw;
      text-align: center;
      height: 60px;
    }
    .lianjie ul li {
      float: left;
      text-align: center;
      width: 25%;
      overflow: hidden;
      padding: 0 1.33333333vw;
      box-sizing: border-box;
      color: #848689;
      font-size: 3.73333333vw;
    }
    .lianjie ul li ~ li {
      border-left: 1px solid #999;
    }
    .kehuduan {
      border-bottom: 1px solid #e5e5e5;
      padding: 1.6vw 1.86666667vw;
      text-align: center;
    }
    .kehuduan img {
      width: 16vw;
      vertical-align: middle;
      text-align: center;
    }
    .kehuduan img:nth-child(2) {
      margin: 0 8vw;
    }
    .banquan {
      text-align: center;
      color: #848689;
      font-size: 1.86667vw;
      padding: 2vw 0;
      margin-bottom: 14.4vw;
    }
    .bottom-top {
      position: fixed;
      bottom: 120px;
      right: 9px;
      width: 38px;
      height: 38px;
      background-image: url("");
      background-size: 38px 38px;
      background-repeat: no-repeat;
      background-position: 50%;
      z-index: 20;
    }
    </style>